<template>
    <div ref="editor">
    </div>
</template>

<script>
    // import 'assets/ueditor/ueditor.config';
    // import 'assets/ueditor/ueditor.all.min';
    // import 'assets/ueditor/lang/zh-cn/zh-cn';
    // import 'assets/ueditor/plugins/135editor.js';
    const UE = require('UE');

    import util from 'src/util/util/index';

    export default {
        data() {
            return {
                id: util.getRandom(100000) + 'ueditorId',
                con:''
            };
        },
        props: {
            value: {
                type: String,
                default: null,
            },
            config: {
                type: Object,
                default: {},
            }
        },
        methods: {
            registerMaxview() {
                let _this = this
                UE.registerUI('maxview', function(editor, uiName) {
                    editor.registerCommand(uiName, {
                        execCommand: function() {
                        },
                    });
                    var btn = new UE.ui.Button({
                        name: uiName,
                        title: '视窗最大化',
                        cssRules:`background-position: -460px -20px`,
                        onclick: function() {
                            editor.execCommand(uiName);
                            editor.setHeight(window.innerHeight-150)
                        }
                    });
                    return btn;
                });
            },
            registerMinview() {
                let _this = this
                UE.registerUI('minview', function(editor, uiName) {
                    editor.registerCommand(uiName, {
                        execCommand: function() {
                        },
                    });
                    var btn = new UE.ui.Button({
                        name: uiName,
                        title: '视窗最小化',
                        cssRules:`background-position: -500px -20px`,
                        onclick: function() {
                            editor.execCommand(uiName);
                            editor.setHeight(320)
                        }
                    });
                    return btn;
                });
            },
        },
        mounted() {
            let that = this;
            this.$nextTick(function f1() {
                // 保证 this.$el 已经插入文档
                that.registerMaxview()
                that.registerMinview()
                this.$refs.editor.id = this.id;
                this.editor = UE.getEditor(this.id, this.config);
                this.editor.ready(function f2() {
                    this.editor.setContent(this.value);

                    this.editor.addListener("contentChange", function() {
                        const wordCount = this.editor.getContentLength(true);
                        let content = this.editor.getContent();
                        const plainTxt = this.editor.getPlainTxt();
                        util.myutil(this, () => {
                            that.con = this.editor.getContent();
                            let ind = that.con.indexOf('title="正在上传..."');
                            return ind === -1;
                        }, () => {
                            content = that.con;
                            this.$emit('input', {
                                wordCount: wordCount,
                                content: content,
                                plainTxt: plainTxt
                            });
                        }, 0, 100, 50);

                    }.bind(this));

                    this.$emit('ready', this.editor);
                }.bind(this));
            });
        }

    }
</script>
<style lang="less" scoped>
    body {
        background-color: #ff0000;
    }
</style>
